import React, { useState, useEffect } from 'react';
import { ImageBackground, Image, View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { pTx } from "../utils/dimensions"
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
import Video from 'react-native-video';
import httpApi from "../api"

export default ({ item, navigation, source = {}, style = {}, width = 0 }) => {
    const [height, setHeight] = useState(100);
    const [duration, setDuration] = useState(0)
    const M = item.M?.split(' ')
    useEffect(() => {
        if (source.uri) {
            // 网络图
            Image.getSize(source.uri, (w, h) => {
                setHeight((width * h) / w);
            });
        } else {
            // 本地图
            const result = Image.resolveAssetSource(source);
            let h = result.height;
            let w = result.width;

            const finalHeight = (width * h) / w;
            setHeight(finalHeight);
        }
    }, [source, width]);
    return <ImageBackground style={[style.video, style, { height, width, borderRadius: pTx(6) }]} source={source} >
        <Video
            paused={true}
            onLoad={(data) => setDuration(Math.round(data.duration))}
            source={{ uri: (M[1].slice(0, 4) != "file" ? httpApi.inline : "") + M[1] }}
        />
        <TouchableWithoutFeedback onPress={() => navigation.navigate('fullVideo', item)}>
            <View style={styles.video}>
                <View style={styles.playCircleBox} >
                    <IconOutline style={styles.playCircle} name="play-circle" />
                </View>
                <Text style={[styles.styleText]}>0:{duration}</Text>
            </View>
        </TouchableWithoutFeedback>
    </ImageBackground>

};

const styles = StyleSheet.create({
    video: {
        flex: 1,
        position: "relative",
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#000"
    },
    playCircleBox: {
        position: "absolute",
        flex: 1,
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
    },
    playCircle: {
        fontSize: pTx(24),
        color: "#fff",
    },
    styleText: {
        position: "absolute",
        right: 0,
        bottom: 0,
        padding: pTx(10),
        fontSize: pTx(10),
        color: "#fff",
    }
})